<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- axios 用来发送网络请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入elementUI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">

    <div class="box" style="width: 600px;height: 400px; margin:100px auto;text-align: center;">
        <el-card class="box-card">
            <h1> 用户登录</h1>
            <el-form ref="formLogin" :model="formLogin" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="formLogin.user"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formLogin.pwd" type='password'></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loginHandle">点击登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <hr>
    <button type="button" @click="getProject()">获取所有项目</button>
    <div class="box2">
        <el-table
                :data="projects"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="项目名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="testcases"
                    label="用例数">
            </el-table-column>
        </el-table>
    </div>
</div>
<script type="text/javascript">
    const request = axios.create({
        // 指定请求HTTP响应码错误范围
        validateStatus: function (status) {
            return true
        },
        // 指定基本的url地址
        baseURL: 'http://127.0.0.1:5000',

    })

    // 添加请求拦截器：每次请求接口都会自动调用
    request.interceptors.request.use(function (config) {
        // 在发送请求之前,判断是否有token
        if (window.sessionStorage.getItem('token')) {
            config.headers.Authorization = 'JWT ' + window.sessionStorage.getItem('token')
        }
        console.log('请求头', config.headers)
        return config;
    })

    var vm = new Vue({
        el: '#app',
        data: {
            formLogin: {
                username: 'musen123',
                password: '1234567'
            },
            projects: [],
        },
        methods: {
            // 点击登录之后，处理登录的方法
            loginHandle: async function () {
                // 请求登录接口
                console.log('请求登录接口')
                const response = await request.post('/user/login/', this.formLogin)
                console.log(response)
                // 判断登录请求是否成功
                if (response.status === 200) {
                    alert('登录成功')
                    window.sessionStorage.setItem('token', response.data.token)
                } else {
                    alert('登录失败')
                }
            },
            getProject: async function () {
                // 请求项目列表
                console.log('请求项目列表接口')
                const response = await request.get('/projects/')
                console.log(JSON.stringify(response.data))
                this.projects = response.data.results
            }
        }

    })
</script>


</body>
</html>
